<template>
  <div class="cloudmsg">
    <setting-closed v-if="isOpened === false" @open="isOpened = true;activeName = '1'"/>
    <el-tabs v-if="isOpened" v-model="activeName">
      <el-tab-pane label="概览" name="1">
        <about v-if="activeName === '1'"/>
      </el-tab-pane>
      <el-tab-pane label="设置" name="2">
        <setting v-if="activeName === '2'" @close="isOpened = false"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Setting from './components/cloudmsg/msgOpened'
import About from './components/cloudmsg/about'
import SettingClosed from './components/cloudmsg/msgClosed'
export default {
  components: {
    Setting,
    SettingClosed,
    About
  },
  data() {
    return {
      activeName: '1',
      isOpened: true
    }
  }
}
</script>

<style lang="scss">
.cloudmsg {
  padding: 0 20px;
}
</style>
